<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_batch_import')" :visible.sync="visible"
    custom-class="dialog_big" destroy-on-close>
    <div v-loading="loading">
      <el-form :model="form" ref="form" label-position="top">
        <el-form-item >

          <button_select_file @input="uploadFile" type="primary">
            {{ $tt('label_import_excel') }}
            <i class="el-icon-upload2 el-icon--right"></i>
          </button_select_file>
          <el-button @click="downloadImportTemp" size="mini" type="primary">
            {{ $tt('label_download_import_template') }}<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </el-form-item>
        <el-form-item prop="tableList">
          <ex_super_table ref="table" v-bind="tableBaseOption" :data="form.tableList" height="600">
          </ex_super_table>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
      </span>
    </div>

  </el-dialog>
</template>

<script>

// import xlsx from '@/asset/xlsx.full.min.js'
// import { log } from 'shelljs/src/common';
// import ExcelJS from '@/asset/exceljs.bare.min.js'

export default {
  components: {},
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        tableList: [],
      },
      tableBaseOption: {
        model: [
          {
            key: 'deliveryCountryName',
            label: 'label_delivery_country',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                <ex_super_input
                    value={row.deliveryCountryName}
                    onInput={
                      value => this.$set(row, column.property, value)
                    }
                    type='select'
                    url='/tms-api/client/TmsPlaceInfoClientRpc/selectCountry.json'
                    storeData
                    filterable
                    option={{
                      label: it => this.$formatNameCode(it.countryName, it.countryCode),
                      value: 'countryName'
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryProvinceName',
            label: 'label_delivery_province',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                <ex_super_input
                    value={row.deliveryProvinceName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryCityName',
            label: 'label_delivery_city',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryCityName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryAreaName',
            label: 'label_delivery_area',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryAreaName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryAddress',
            label: 'label_tms_waybill_dispatch_addr',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryAddress}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryPostalCode',
            label: 'label_delivery_postal',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryPostalCode}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryUserName',
            label: 'label_tms_track_consigner_name',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryUserName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryContacts',
            label: 'label_tms_waybill_consigner_contact',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryContacts}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptCountryName',
            label: 'label_receipt_country',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                <ex_super_input
                    value={row.receiptCountryName}
                    onInput={
                      value => this.$set(row, column.property, value)
                    }
                    type='select'
                    url='/tms-api/client/TmsPlaceInfoClientRpc/selectCountry.json'
                    storeData
                    filterable
                    option={{
                      label: it => this.$formatNameCode(it.countryName, it.countryCode),
                      value: 'countryName'
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptProvinceName',
            label: 'label_receipt_province',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptProvinceName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptCityName',
            label: 'label_receipt_city',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptCityName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptAreaName',
            label: 'label_receipt_area',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptAreaName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptAddress',
            label: 'label_tms_track_receiving_addr',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptAddress}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptPostalCode',
            label: 'label_receipt_postal',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptPostalCode}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptUserName',
            label: 'label_tms_track_consignee_name',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptUserName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'receiptContacts',
            label: 'label_tms_waybill_consignee_contact',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.receiptContacts}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'productCode',
            label: 'label_logistics_code',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.productCode}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                    type='select'
                    option={{label: 'productName', value: 'productCode'}}
                    url={this.$url['fms/ExpressProduct']}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'lastTransportType',
            label: 'label_delivery_method',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.lastTransportType}
                    onInput={value => {
                      this.$set(row, column.property, this.$t(`TmsLastTransportTypeEnum__${value}`))
                    }}
                    type='select'
                    enum="TmsLastTransportTypeEnum"
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'isDrawback',
            label: 'label_whether_refund_taxes',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.isDrawback}
                    onInput={value => {
                      this.$set(row, column.property, this.$t(`YesOrNoEnum__${value}`))
                    }}
                    type='select'
                    enum="YesOrNoEnum"
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'isInsurance',
            label: 'label_network_isInsurance',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.isInsurance}
                    onInput={value => {
                      this.$set(row, column.property, this.$t(`YesOrNoEnum__${value}`))
                    }}
                    type='select'
                    enum="YesOrNoEnum"
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'skuAmount',
            label: 'label_total_value',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.skuAmount}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'deliveryType',
            label: 'label_delivery_type',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.deliveryType}
                    onInput={value => {

                      this.$set(row, column.property, this.$t(`DeliveryTypeEnum__${value}`))
                    }}
                    type='select'
                    enum='DeliveryTypeEnum'
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'selfDeliveryLogisticsName',
            label: 'label_logistics_company',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.selfDeliveryLogisticsName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'payType',
            label: 'label_payment_method',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.payType}
                    type="select"
                    enum="TmsOrderPayTypeEnum"
                    onInput={value => {
                      this.$set(row, column.property, this.$t(`TmsOrderPayTypeEnum__${value}`))
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'remark',
            label: 'label_remark',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.remark}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'transportNumber',
            label: 'label_packagea_or_container_or_tracking_code',
            'min-width': 180,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.transportNumber}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'weight',
            label: 'label_weight',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.weight}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'length',
            label: 'label_length',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.length}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'width',
            label: 'label_width',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.width}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'height',
            label: 'label_height',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.height}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          { key: 'errorMsg', label: 'label_error_info', 'min-width': 120, 'show-overflow-tooltip': true, },
          {
            type: 'operate',
            width: 120,
            operate: [{
              label: 'label_delete',
              click: (row,index) => {
                this.deleteFn(row,index)
              }
            }]
          }
        ],
      },
      formRules: {
        deliveryCountryName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryProvinceName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryCityName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryPostalCode: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryAddress: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryUserName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryContacts: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptCountryName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptProvinceName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptCityName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},

        receiptAddress: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptUserName: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptContacts: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        receiptPostalCode: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        totalQuantity: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        totalVolume: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        totalWeight: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        productCode: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        lastTransportType: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        deliveryType: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        payType: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        weight: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        length: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        width: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
        height: {required: true,message: this.$t("tip_can_no_empty"), trigger: "blur"},
      },
    }
  },
  methods: {
    show() {
      this.$set(this.form, 'tableList', [])
      this.visible = true
    },
    // 下载模版
    downloadImportTemp() {
      window.open('https://kyb-bronze-public-oss.oss-cn-shenzhen.aliyuncs.com/default_template/express_import.xlsx')
    },
    // 导入
    uploadFile(e) {
      this.$uploadFile({
        loading: true,
        url: this.$url['oms/ExpressImportExcel'],
        file: e[0],
        success: ({ data }) => {
          this.tipsFn(data)
        }
      })
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$ajax({
            url: this.$url['oms/ExpressHandleBatchImport'],
            method: 'post',
            type: 'json',
            loading: this.$t('tip_submiting'),
            data: {orderInfoVOList:this.form.tableList },
            success: ({data}) => {
              this.tipsFn(data)
              // this.$message.success(this.$t("tip_submit_success"))
              // this.$emit("submitSuccess")
              // this.visible = false
            },
          })
        } else {
          this.$message.error(this.$t('form_validate_error'))
          return false;
        }
      });
    },
    deleteFn(row,index){
      this.form.tableList.splice(index, 1);
    },
    tipsFn(data){
     const msg = this.$t('label_tms_import_tips',[data.totalNum,data.successNum,data.failNum])
     this.$message.info(msg)
     this.$set(this.form, 'tableList', data.errorList)

      //全部成功时 可以关闭弹窗
      if (data.failNum === 0) {
        this.visible = false
      }
      //有成功导入 更新页面数据
      if(data.successNum>0){
        this.$emit("submitSuccess")
      }

    }
  }
}
</script>
